<template>
  <view class="news-list">
    <!-- 引入自定义组件 -->
    <top-news-card 
      v-for="(news, index) in newsList" 
      :key="index" 
      :title="news.title" 
      :content="news.content" 
      :time="news.time" 
      :is-top="news.isTop" 
      @click="news.onCardClick"
    ></top-news-card>
  </view>
</template>

<script>
// 引入自定义组件
import TopNewsCard from '../../components/TopNewsCard.vue'

export default {
  components: {
    TopNewsCard // 注册组件
  },
  data() {
    return {
      // 新闻数据数组，包含置顶和非置顶新闻
      newsList: [
        {
          title: "【置顶】uniapp组件化开发教程发布",
          content: "本教程详细讲解uniapp中自定义组件的创建、使用及数据传递，帮助开发者提升代码复用性...",
          time: "2025-10-29 09:00",
          isTop: true
        },
        {
          title: "前端工程化实践：组件化与模块化",
          content: "组件化开发是前端工程化的核心实践之一，本文从架构设计角度分析组件化的落地方式...",
          time: "2025-10-28 15:30",
          isTop: false
        },
        {
          title: "【置顶】uni-app 3.0新特性解读",
          content: "uni-app 3.0版本带来了多项性能优化和新功能，包括更好的多端兼容、新增组件等...",
          time: "2025-10-27 10:00",
          isTop: true
        },
        {
          title: "Vue3组合式API在业务中的应用",
          content: "组合式API让代码逻辑更聚合，本文结合实际业务场景，讲解其在项目中的落地方法...",
          time: "2025-10-26 14:20",
          isTop: false
        }
      ]
    };
  }
};
</script>

<style scoped>
.news-list {
  padding: 20rpx;
}
</style>